import { defineStore } from 'pinia'

import type { AppThemeItem } from '@/components/business'
import { storesKey, themeActive, themes } from '@/config'

export const useThemeStore = defineStore(storesKey.theme, () => {
  const active = ref<string | number>(themeActive)

  const activeTheme = computed<AppThemeItem>(() => {
    const theme: AppThemeItem | undefined = themes.find(
      ({ id }) => id === active.value
    )
    return theme ?? themes[0]
  })

  const switchTheme = (key: string) => {
    const keys = themes.map(({ id }) => id)
    const is = keys.includes(key)
    if (is) {
      active.value = key
    }
  }

  const changeTheme = (id: string | number) => {
    active.value = id
  }

  return { active, switchTheme, changeTheme, activeTheme }
})
